<template>
  <div class="customer-detail" v-if="init">
    <div class="customer">
      <div class="customer-box">
        <div class="customer-icon">
          <el-image class="image" :src="detail.customer.avatar" fit="fill"/>
          <div>{{ detail.customer.name }}<span class="user-type-icon">@{{ userType() }}</span></div>
        </div>
        <div class="intro-box">
          <div class="intro">
            <span class="intro-name">性别：</span>
            <span class="intro-val">{{ gender() }}</span>
          </div>
          <div class="intro">
            <span class="intro-name">类型：</span>
            <span class="intro-val">{{ userType() }}</span>
          </div>
          <div class="intro al-flex-row" style="width:400px">
            <span class="intro-name">企业主体名称：</span>
            <span class="intro-val">
              <wx-tooltip style="width:160px">{{ detail.customer.corpFullName }}</wx-tooltip>
            </span>
          </div>
          <div class="intro" style="width:200px">
            <span class="intro-name">职位：</span>
            <span class="intro-val">{{ detail.customer.position }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="followers">
      <el-table :data="detail.followers" row-key="userId"
                :expand-row-keys="expandRowKeys"
                style="width: 100%" :header-cell-style="{'background-color':'#fff'}">
        <el-table-column type="expand">
          <template slot-scope="{row}">
            <div class="group-flex-row">
              <div label-position="left" inline class="follower-table-expand">
                <div class="label">企业标签</div>
                <div>
                  <div v-for="(group,index) in row.groups" :key="index">
                    <div class="follower-group">
                      <div class="f-g-label">{{ group.name }}:</div>
                      <div>
                        <wx-link tag v-for="tag in group.tags" :key="tag.id">{{ tag.name }}</wx-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <wx-link class="edit-tag" @click.native="openTagDialog(row)">编辑标签</wx-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="员工" prop="userName"/>
        <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true"/>
        <el-table-column label="企业主体" prop="remarkCorpName" :show-overflow-tooltip="true"/>
        <el-table-column label="备注电话" prop="remarkMobiles" :show-overflow-tooltip="true"/>
        <el-table-column label="添加时间" prop="addTime"/>
        <el-table-column label="是否流失" width="80">
          <template slot-scope="{row}">
            <span :class="{'is-delete':row.isDelete}">{{ row.isDelete ? '已流失' : '未流失' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流失时间" prop="deleteTime"/>
        <el-table-column label="操作" width="60">
          <template slot-scope="{row}">
            <wx-link @click.native="openFollowerRemarkDialog(row)">编辑</wx-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <wx-tag :choiceTags="editTags.tags" :show.sync="dialog.tag" @sure="editTag"/>

    <el-dialog title="编辑备注" :visible.sync="dialog.remark">
      <el-form :model="remarkForm" label-width="120px">
        <el-form-item label="备注">
          <el-input v-model="remarkForm.remark" maxlength="15" show-word-limit/>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="remarkForm.remarkMobiles"/>
        </el-form-item>
        <el-form-item label="企业">
          <el-input v-model="remarkForm.remarkCorpName" maxlength="30" show-word-limit/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="remarkForm.description"
                    resize="none" :rows="4" maxlength="100" show-word-limit/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.remark = false">取 消</el-button>
        <el-button type="primary" @click="submitEditRemark">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";
import {customerDetail} from "@/api/wxqy/Search";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import WxTag from "@/components/wxqy/wxTag/wxTag";
import {bindFollowerTags, editFollowerRemark} from "@/api/wxqy/qiyeWeixinTag";

export default {
  name: "detail",
  components: {WxTag, WxLink, WxTooltip},
  data() {
    return {
      init: false,
      detail: {},
      expandRowKeys: [],
      dialog: {tag: false, remark: false},
      editTags: {userId: null, tags: []},
      remarkForm: {}
    }
  },
  methods: {
    async extUserDetail(id) {
      await customerDetail(id).then(e => {
        this.detail = e.data
        this.init = true
      })
    },
    gender() {
      let t = this.detail.customer.gender
      if (t === 0) return '未知'
      if (t === 1) return '男'
      return '女'
    },
    userType() {
      return this.detail.customer.type === 1 ? '微信用户' : '企业微信用户'
    },
    editTag(e) {
      if (this.editTags.userId) {
        if (e.length === this.editTags.tags.length) {
          let existIds = this.editTags.tags.map(t => t.id)
          let addTag = e.filter(t => !existIds.includes(t.id))
          if (!addTag.length) return
        }
        let ids = e.flatMap(tag => tag.id).join()
        bindFollowerTags({
          tags: ids,
          id: this.detail.customer.id,
          userId: this.editTags.userId
        }).then(e => {
          this.$message.success('绑定成功')
          this.extUserDetail(this.detail.customer.id);
          this.editTags.tags = []
        })
      } else {
        this.$message.error('未选择员工')
      }
    },
    openTagDialog(row) {
      this.editTags.userId = row.userId
      this.editTags.tags = row.groups.flatMap(g => g.tags)
      this.dialog.tag = true
    },
    submitEditRemark() {
      editFollowerRemark(this.remarkForm).then(e => {
        let f = this.remarkForm
        this.detail.followers.filter(fv => fv.userId === f.userId)
          .map(fv => {
            fv.remark = f.remark ? f.remark : fv.remark
            fv.remarkMobiles = f.remarkMobiles ? f.remarkMobiles : fv.remarkMobiles
            fv.remarkCorpName = f.remarkCorpName
            fv.description = f.description
          })
        this.$message.success("更新备注成功")
        this.dialog.remark = false
        this.remarkForm = {}
      })
    },
    openFollowerRemarkDialog(row) {
      this.remarkForm = {
        userId: row.userId, extUserId: row.extUserId,
        remark: row.remark, remarkMobiles: row.remarkMobiles,
        remarkCorpName: row.remarkCorpName, description: row.description
      }
      this.dialog.remark = true
    }
  },
  created() {
    let id = this.$route.query.id
    if (id) {
      this.extUserDetail(id);
    } else {
      this.$router.push({path: 'list'})
    }
  }
}
</script>

<style scoped lang="scss">
@mixin border-radius {
  border-radius: 10px;
}

@mixin cs-flex-row {
  display: flex;
  flex-flow: row;
}

.customer-detail {
  margin-top: 10px;
  padding: 0 20px;

  .customer {
    @include border-radius;
    padding: 14px;
    background-color: #fff;

    .customer-box {
      display: flex;

      .customer-icon {
        @include cs-flex-row;
        flex: 0 0 300px;
      }
    }

    .intro-box {
      @include cs-flex-row;
      flex-wrap: wrap;
      margin: 10px 0 0 20px;

      .intro {
        font-size: 14px;
        margin: 0 10px;
        width: 120px;

        .intro-name {
          color: #767779;
          font-weight: 400;
        }

        .intro-val {
          color: #636262;
          font-weight: 500;
        }
      }
    }
  }

  .followers {
    margin-top: 14px;
    @include border-radius;
    background-color: #fff;
    padding: 10px;
  }

  .image {
    @include border-radius;
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
}

.user-type-icon {
  font-size: 6px;
  color: #05b178;
}

.is-delete {
  color: #ce2424;
}

.group-flex-row {
  @include cs-flex-row;
}

.follower-table-expand {
  margin-left: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 88%;

  .label {
    flex: 0 0 120px;
  }
}

.follower-group {
  @include cs-flex-row;
  align-items: center;

  .f-g-label {
    min-width: 120px;
  }

  .edit-tag {
    flex: 0 0 120px;
    margin-right: 10px;

  }
}
</style>
